<template>
  <div class="h-96 overflow-y-auto">
    <table class="text-left">
      <thead class="border-b text-lg font-semibold">
        <tr>
          <th scope="col" class="px-6 py-4"></th>
          <th scope="col" class="px-6 py-4">板块</th>
          <th scope="col" class="px-6 py-4">股票</th>
          <th scope="col" class="px-6 py-4">涨幅</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in list" :key="item.symbol" class="border-b">
          <td
            class="px-6 py-4 text-lg font-semibold text-red-500"
            :rowspan="table_rowspan(i, item.yesterday_limit_up_days)"
            v-if="table_rowspan(i, item.yesterday_limit_up_days) > 0"
          >
            {{ item.yesterday_limit_up_days }}连板
          </td>
          <td class="cursor-pointer px-6 py-4" @click="Utils.forwordBk(item.surge_reason.related_plates[0].plate_id)">
            <template v-if="item.surge_reason != null">
              {{ item.surge_reason.related_plates[0].plate_name }}
            </template>
          </td>
          <td class="cursor-pointer px-6 py-4" @click="Utils.forwordGu(item.symbol)">
            <div class="font-semibold">{{ item.stock_chi_name }}</div>
            <div class="text-gray-400">{{ item.symbol }}</div>
          </td>
          <td class="px-6 py-4" :class="item.change_percent > 0 ? 'text-red-500' : 'text-green-600'">{{ (item.change_percent * 100).toFixed(2) }}%</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import axios from 'axios';
import Utils from '../utils/index';
import { ref } from 'vue';

const list = ref([]);

function fetchData() {
  axios.get('https://flash-api.xuangubao.cn/api/pool/detail?pool_name=yesterday_limit_up').then(function (res) {
    let result = res.data.data.filter(function (b) {
      return b.yesterday_limit_up_days > 1 && (b.stock_type == 0 || b.stock_type == 4);
    });
    result = result.sort(Utils.compare('yesterday_limit_up_days'));
    let orderType = [
      {
        key: 'yesterday_limit_up_days', //按照哪个字段进行排序
        method: 'des', //标明按照什么方法
      },
      {
        key: 'change_percent',
        method: 'des',
      },
    ];
    list.value = Utils.objectSort(result, orderType);
  });
}

//当前索引和涨停天数
function table_rowspan(index, v) {
  let r = 1;
  // console.log(index, v)
  // if (index == 0) {
  //   return 1;
  // }
  if (index > 0 && list.value[index - 1].yesterday_limit_up_days == v) {
    return 0;
  }
  for (let i = index; i < list.value.length; i++) {
    if (i < list.value.length - 1 && list.value[i + 1].yesterday_limit_up_days == v) {
      r++;
    } else {
      return r;
    }
  }
}

defineExpose({
  fetchData,
});
</script>
